<!DOCTYPE html>
<html>
<head>
	<title>随机背景颜色课堂范例</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{ text-align: center; }
		#bg{
			width:300px;
			height: 300px;
			border:2px solid;
			margin: 50px auto;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			// 1.获取节点
			var div1 = document.getElementById("bg");
			// console.log(div1);
			var btn1 = document.getElementById("btn1");
			// console.log(btn1);

			// 给的数组，里面存放颜色
			var bgc = ["#000","red","yellow","orange","green","cyan","blue","purple","#abcdef"]
			// 2.给按钮加点击事件
			btn1.onclick = function(){
				// 取随机数取整后作为索引
				var num = Math.floor(Math.random()*10)
				console.log(bgc[num])
				// 更改div的背景颜色
				div1.style.backgroundColor = bgc[num];
			}

		}
	</script>
</head>
<body>
	<div id="bg"></div>
	<button id="btn1">添加随机的背景颜色</button>
	

<!-- 	知识点：
	修改标签的样式：节点变量.style.要改的样式的名字 = "样式值" 如果样式名中有连接符如font-size，需要去掉连接符，后一个单词首字母大写，改后为fontSize
-->
</body>
</html>